<template>
	<div class="tab-contanter b-r-1 animated fadeIn">
		<div class="tab-head text-14 text-black b-b-1" v-if="secondDirectory && secondDirectory.title">{{secondDirectory.title}}</div>
		<div class="text-14 tab-info p-all-10">
			<template  v-if="secondDirectory">
			<template v-for="(item, index) in secondDirectory.list" >
				
				<span 
					v-if="item.show && item.val !='会员等级'"
					@click="selectCardInfo(item, index)"
					class="m-b-10"  
					:class="{'active': currentIndex == index}">
					{{item.val}}
				</span>
				<span 
					v-if="item.show && item.val =='会员等级' && getSeniorMall"
					@click="selectCardInfo(item, index)"
					class="m-b-10"  
					:class="{'active': currentIndex == index}">
					{{item.val}}
				</span>
			</template>
			</template>
		</div>
	</div>
</template>
<script>
	import { mapMutations,mapGetters } from 'vuex'
	import { DEFAUL_INDEX } from '@/utils/config.js'
	export default {
		data() {
			return {
				currentIndex: 0
			}
		},
		created() {
			console.log(this.secondDirectory)
		},
		methods: {
			/**
			 * @author yang
			 * @desc 点击二级菜单栏 获取当前对应的请求内容
			 */
			selectCardInfo(item, index) {

				console.log(this.tabList)
				let attr  = ''
				if(this.tabList && this.tabList.length>0) {
					attr = this.tabList.filter((element) => { return element.title === item.val})
				}
				
				let list = this.tabList
				if(!attr.length) {

					list.push({title: item.val, name: (index + DEFAUL_INDEX) + ''})
					this.setTabList(list)
					
					this.currentIndex = index

					this.setTabCurrentIndex(this.currentIndex + DEFAUL_INDEX)
					console.log(this.tabList)
				}
				if(this.secondDirectory &&  this.secondDirectory.list.length  === list.length) {
					this.setTabCurrentIndex(index + DEFAUL_INDEX)
				}else{
					this.setTabCurrentIndex(index + DEFAUL_INDEX)
				}
			},
			...mapMutations({
				setTabList: 'SET_TAB_LIST',
				setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
			}),
		},
		watch: {
			secondDirectory(val) {
				console.log(val)
			},
			tabCurrentIndex(newVal, oldVal) {
				
				if(newVal != oldVal) {
					this.currentIndex = newVal - 1
				}
			}
		},
		computed: {
			...mapGetters([
				'tabList',
				'getSeniorMall',
				'secondDirectory',
				'tabCurrentIndex'
			])
		}
		
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
   .tab-contanter{
		width: 150px;
		min-width: 150px;
		min-height: 100%;
		max-height: 100%;
		display: flex;
		flex-direction: column;
		.tab-head{
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
		.tab-info{
			width: 100%;
			flex: 1;
			box-sizing: border-box;
			>span{
				width: 100%;
				height: 40px;
				transition: all 0.2s linear;
				line-height: 40px;
				display: block;
				cursor: pointer;
				text-align: center;
				border: 1px solid #ccc;
			}
			>span:hover{
				padding-right:10px;
				color: #409EFF;
			}
		}
		.active{
			color: #409EFF;
		}
	 }
</style>